<template>
    <div>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item }}
        </li>
      </ul>
  
      <ul>
        <li v-for="item in list2" :key="item.id">
          {{ item.uanme }}
        </li>
      </ul>
      <button @click="btn1">点击增加1</button>
      <button @click="btn2">点击增加2</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: ["1.小张", "2.小李", "3.小吴", "4.小赵"],
        list2: [
          { uanme: "小张", id: 10 },
          { uanme: "小常", id: 12 },
          { uanme: "小李", id: 14 },
          { uanme: "小吴", id: 16 },
          { uanme: "小赵", id: 17 },
        ],
      };
    },
    methods: {
      btn1() {
        this.list.splice(2, 0, "100.李易峰");
        console.log( this.list);
      },
      btn2() {
        // key的值只能是唯一不重复的, 字符串或数值
        this.list2.splice(1, 0, { uanme: "老六", id: 100 });
      },
    },
  };
  </script>
  
  <style>
  </style>